<template>
  <div id="material">
      材质就是对WEBGL着色器代码的封装
  </div>
</template>

<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
export default {
  name: 'material',
  data(){
      return{
      }
  },
  methods:{
      test_material1(){
          let container = document.getElementById('material');
          let scene = new THREE.Scene();
          //球体几何对象
          let geometry = new THREE.SphereGeometry(100, 25, 25); 
          // 创建一个点材质对象
          let material = new THREE.PointsMaterial({
            color: 0x0000ff, //颜色
            size: 3, //点渲染尺寸
           });
          //点模型对象, 参数：几何体  点材质
        let point = new THREE.Points(geometry, material);
        scene.add(point); //网格模型添加到场景中
        let axisHelper = new THREE.AxesHelper(250);
        scene.add(axisHelper); 
        //点光源
        let pointLight = new THREE.PointLight(0xffffff);
        //点光源位置
        pointLight.position.set(400, 200, 300); 
        //点光源添加到场景中
        scene.add(pointLight); 
        //环境光
        let ambient = new THREE.AmbientLight(0x444444);
        scene.add(ambient);
        //相机系数设置
        //窗口宽度
        let width = container.clientWidth; 
        //窗口高度
        let height = container.clientHeight; 
        //窗口宽高比
        let k = width / height;
        //三维场景显示范围控制系数，系数越大，显示的范围越大 
        let s = 200; 
        //创建相机对象
        let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
        camera.position.set(250, 250, 250); //设置相机位置
        camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
        //创建渲染器对象
        let renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height); //设置渲染区域尺寸
        renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
        container.appendChild(renderer.domElement); //插入canvas对象
        function render(){ 
            renderer.render(scene,camera); 
        }
        let controls = new OrbitControls(camera,renderer.domElement);//创建控件对象
        controls.addEventListener('change', render);//监听鼠标、键盘事件 
      },
      test_material2(){
        let container = document.getElementById('material');
          let scene = new THREE.Scene();
          //球体几何对象
          let geometry = new THREE.SphereGeometry(100, 25, 25); 
          // 创建一个线材质对象
        //   let material = new THREE.LineBasicMaterial({
        //     color: 0x0000ff, //颜色
        //    });
        let material = new THREE.LineDashedMaterial({
            color: 0x0000ff,
            dashSize: 10,//显示线段的大小。默认为3。
            gapSize: 50,//间隙的大小。默认为1
        });
        let line = new THREE.Line(geometry, material);
        scene.add(line); //网格模型添加到场景中
        let axisHelper = new THREE.AxesHelper(250);
        scene.add(axisHelper); 
        //点光源
        let pointLight = new THREE.PointLight(0xffffff);
        //点光源位置
        pointLight.position.set(400, 200, 300); 
        //点光源添加到场景中
        scene.add(pointLight); 
        //环境光
        let ambient = new THREE.AmbientLight(0x444444);
        scene.add(ambient);
        //相机系数设置
        //窗口宽度
        let width = container.clientWidth; 
        //窗口高度
        let height = container.clientHeight; 
        //窗口宽高比
        let k = width / height;
        //三维场景显示范围控制系数，系数越大，显示的范围越大 
        let s = 200; 
        //创建相机对象
        let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
        camera.position.set(250, 250, 250); //设置相机位置
        camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
        //创建渲染器对象
        let renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height); //设置渲染区域尺寸
        renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
        container.appendChild(renderer.domElement); //插入canvas对象
        function render(){ 
            renderer.render(scene,camera); 
        }
        let controls = new OrbitControls(camera,renderer.domElement);//创建控件对象
        controls.addEventListener('change', render);//监听鼠标、键盘事件 
      }
  }, 
  mounted () {
      //通常使用点模型的时候会使用点材质
    //   this.test_material1();
      //通常使用线模型的时候会使用线材质
    this.test_material2();
 }
}
</script>

<style scope>
#material{
     height: 500px;
}
</style>